<template>
  <div class="person">
    <h1 id="testId">测试id</h1>
    <h1 ref="title1">尚硅谷</h1>
    <h1 ref="title2">前端</h1>

    <button @click="showLog">点我打印内容</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { ref, defineExpose } from "vue";
  // 数据
  let title1 = ref()
  let title2 = ref()

  //暴露的数据
  let name = ref('张三')
  let age = ref(18)

  //使用defineExpose将组建的数据导出给外部
  defineExpose({ name, age })


  function showLog() {
    // 通过id获取元素
    const t1 = document.getElementById('testId')
    console.log((t1 as HTMLElement).innerText)

    //通过ref获取元素
    console.log(title1.value)
    console.log(title2.value)
  }


</script>
<style scoped>
  .person {
    width: 100%;
    background-color: skyblue;
    box-shadow: 0px 1px 2px #ddd;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
</style>
